<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>遮罩层</title>
    <style>

        #shade{
            position:absolute;
            top:0;
            left:0;
            z-index:2;
            width:100%;
            height:100%;
            background-color:#000;
            opacity:0.3;
            /*兼容IE8及以下版本浏览器*/
            filter: alpha(opacity=30);
            display:none;
        }

        #modal {
            position: absolute;
            z-index:3;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width:200px;
            height:200px;
            margin: auto;
            display:none;
            background-color:#FF0;
        }
    </style>
    <script>
        window.onload=function(){
            var a1=document.getElementById('a1');
            var a2=document.getElementById('a2');
            a1.onclick=shield;
            a2.onclick=cancel_shield;

            function shield(e){
                e.preventDefault();
                var shade = document.getElementById("shade");
                shade.style.display = "block";

                var modal = document.getElementById("modal");
                modal.style.display = "block";
            }

            function cancel_shield(e){
                e.preventDefault();
                var shade = document.getElementById("shade");
                shade.style.display = "none";

                var modal = document.getElementById("modal");
                modal.style.display = "none";
            }
        };
    </script>
</head>

<body>
<a id="a1" href="#">打开遮罩</a>
<div id="shade"></div>
<div id="modal">
    <a id="a2" href="#">关闭</a>
</div>
</body>

</html>